p3 : headers에 Content-type을 지정하는 것은 주로 post 요청에서 많이 보내게 되는데, axios는 post 요청에서 자동으로 headers에 "Content-type": "application/json"를 추가해줍니다! default 값으로 이미 설정이 되어 있어서 이 부분이 없어도 잘 작동하지만 명시적으로 작성을 할 수 있으니 참고하시면 좋을 것 같아요!

오호 기본값으로 설정되어있는줄 몰랐는데 완전 유용하네요!! 감사합니다

p2 : 물론 간단한 색상이기도 하고, 큰 프로젝트도 아니라 크게 문제될 것은 없지만 일관성으로 white나 black 등도 hex code로 작성해주시는 게 좋을 것 같아요! 그리고 더 찾아보니 css에서 단순 colors name을 사용하는 것보다 hex code로 사용하는 것의 장점이 더 있는 것 같습니다.

1. hex code가 colors name보다 더 정확하다.
2. hex code는 어떤 브라우저든 지원을 하지만 colors name은 매우 오래된 브라우저에는 지원을 안 하는 경우도 있다.
3. hex code가 더 빠르게 처리된다.

[ 참고 자료 ]
https://www.quora.com/Why-is-using-hex-codes-better-than-using-color-names-in-CSS

오호 몰랏던 새로운 사실!! 저도 배우고 갑니다 💪

p2 : fontSize는 rem이 아니라 px로 한 이유가 있으신지 궁금합니다!!

그리고 theme에서 lineHeight도 지정을 해서 사용할 수도 있군요!! 다음에 디자인 시스템 보고 한번 저도 line-height도 지정해봐야겠어요!

p2 : 컴포넌트에 children이 없을 경우 self-closing 하면 좋을 것 같습니다!

p3 : 확실히 style 코드를 분리하니까 로직 부분과 style코드를 따로 볼 수 있어서 가독성이 좋은 것 같네요! 다른 코드 예시에서도 본 것 같은데 theme을 저렇게 받아왔을 때 ${({ theme }) => theme.fonts.title} 이렇게 props 형태로 받아오는 것과 비교해서 장점이 어떤 게 있는지 궁금합니다!

p3 : userToken이 key, value 같으니 한번으로 요약해서 사용해도 좋을 것 같습니다!

updateUserData({
        hobby: input.hobby,
        password: input.password,
        userToken,
    });

p1 : userToken이 있는 지 확인하고 updateUserData함수(api 호출 함수)를 호출하는 로직인데, userToken이 없는 경우에 대한 예외 처리를 서버에서 return 해주니 그걸 이용하는 게 조금 더 맞는 방법이지 않을까 의견을 한 번 내봅니다...!
(제가 틀릴 수 있으니 편하게 말해주세요!!! 저도 배우겠습니다 :) )

그래서 updateUserData를 호출할 때 userToken은 확인하지 않아도 될 것 같고, 확인을 해야 한다면 else문에 alert("칸을 입력해주세요."); 만 쓰는 것이 아니라 예외 처리를 더 추가해야 할 것 같아요! 현재 상황에서 사용자 입장에서 userToken이 없는 경우인데 칸을 입력해달라고 할 수 있으니 당황할 수 있을 것 같습니다!

p3 : 와우!! 이게 pr에 작성해주신 코드네요!! 저는 공통 컴포넌트 구현할 때 props를 주는 것마다 하나하나 작성을 해줬는데 속성으로 지정할 내용을 그대로 전달해서 바로 { ...props }로 적용하면 너무 좋을 것 같아요!! 지식 배워갑니다 :)

{... props} 세미나에서도 배웠는데, 이렇게 쓰이니 진짜 공용 컴포넌트 줄때 완전 확장성이 배로 느네요! 진짜 코드 보면서 많이 배웁니다

p3 : { ...props }로 받아오면 이렇게 type을 지정할 수 있군요!! 대박.....!!!!!!
저도 children 관련해서 ReactNode로 했다가 PropsWithChildren 이라는 타입을 찾아서 관련된 고민을 한 것을 pr에 작성했는데, 한번 읽어보셔도 좋을 것 같습니다 :)

p5: 왕 .. 전 진짜 이번 과제에서 버튼 분리할 생각도 못했는데 진짜 한서님 코드 보고 저 정말 깨달음을 얻었어요!!!

p3: 옹 .env가 올라와있는데 혹시 과제 채점때문에 함께 올려주신건가요?! gitignore 하시지 않은 이유가 궁금합시당

p2: 오홍 위에 엔브가 올라와있다고 코리 남겼는데, .env 가 있는데 적용이 잘 되지 않았던 것 같습니다!
저도 예전에 깃이그노어에서 걸러내려고 했는데 엔브가 올라갔던 경험이 있었어서 그때부터 의식적으로 엔브를 올리지 않기 위해 한 방법이 있는데요! 공유해보겠습니다 :) (전 무려 구글 로그인 구현하려다가 구글키 올려버린.. )

1️⃣ gitignore에 .env 관련 내용 적어주기

.env
.env.local
.env.production
.env.development

2️⃣ git add . 시 항상 git status 찍어보고 .env 포함되었는지 확인하기
만약 포함되어있다면 git rm --cached .env 해주기

p4: HTML의 언어 속성 부분 사소한 부분이지만 저두 맨날 ko로 바꿔주는거 까먹게 되더라구요!

p5: 왕 .. 전 진짜 이번 과제에서 버튼 분리할 생각도 못했는데 진짜 한서님 코드 보고 저 정말 깨달음을 얻었어요!!!

p5: 아 res 상태 코드는 왜 필요한지 궁금했는데, 에러코드가 겹칠 수도 있어서 같이 묶어주신거군요!!
코드 보면 볼 수록 한서님이랑 하는 합세가 너무너무 기대됩니다 ... 🤍

맨날 엑시오스 에러 catch 로 에러값만 리턴한 저에게는 아주 멋진 코드입니다!! 👀

p3: tsx 파일에서 토큰을 가져오는 것과, axios 쏠때 토큰을 가져오는 것중 어디에서 받아오는게 좋을지 고민을 했었는데요.
저의 경우에는 매개변수로 넘겨주는 것보다, 로직 처리할때 호출되면 get해서 가져오는걸로 코드를 작성했습니다! ui 를 보여주는 곳보다는 api 호출때에 가져오는게 더 좋겠다고 생각해서 그랬는데요
요 코드를 보니 한서님의 생각도 너무너무 궁금합니다!!

p5: 던져주기 전에, 깔끔하게 묶어주는 센스 👍

p4: 혹시 이 로직을 useGetMyHobby 로 한번더 묶어주신 이유가 있을까요?! 그리고 res 를 상태 관리해준 이유도 궁금합니다!! (커스텀 훅으로 구분한 이유) 💭 저는 매번 fetchData 형식에서 그냥 응답값을 return 해주는 방식이었어서 요렇게 관리해주면 어떤 점이 더 좋은지 배우고 싶습니다

오호 몰랏던 새로운 사실!! 저도 배우고 갑니다 💪

p5: 토큰 처리는 axios instance 만들어서 사용하면 재사용성을 높일 수 있을것 같아요.
아래 예시 코드 첨부드립니다!

const authClient = axios.create(authAxiosConfig);

authClient.interceptors.request.use(
	async (config) => {
		const accessToken = getAuthHeader();
		if (accessToken) {
			config.headers.Authorization = `Bearer ${accessToken}`;
		} else {
			console.error('토큰이 없습니다. 로그인이 필요합니다.');
			window.location.replace('/auth/login');
		}
		return config;
	},
	(error) => {
		console.error(error);
	},
);

p5: 요런거 IIFE 즉시 실행 함수로 조금 더 선언적이게 작성해줄 수 있어용

{(() => {
        switch (step) {
          case 1: return <Name />;
          case 2: return <Password />;
          case 3: return <Hobby />;
          // default: error handling
        }
      })()}